<template>
  <div class="home">
    <a-form-item name="roomNumber">
      <a-input-search
        v-model="form.name"
        :style="{ width: '320px' }"
        placeholder="请输入学生姓名"
        @search="searchUser"
        search-button
      />
      <a-button
        style="margin-left: 700px; float: right"
        type="primary"
        @click="downloadExcel"
        >一键导出
      </a-button>
      <el-upload action="localhost:8182:/api/user/uploadExcel">
        <a-button style="float: right" type="primary">一键下载 </a-button>
      </el-upload>
    </a-form-item>
    <el-table :data="data" border stripe>
      <el-table-column
        width="50"
        label="序号"
        align="center"
        type="index"
      ></el-table-column>
      <el-table-column
        label="姓名"
        prop="name"
        align="center"
      ></el-table-column>
      <el-table-column label="性别" prop="sex" align="center"></el-table-column>
      <el-table-column
        label="电话"
        prop="iphone"
        align="center"
      ></el-table-column>
      <el-table-column
        label="角色"
        prop="role"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" align="center">
        <template v-slot="scope">
          <el-button @click="toEdit" type="primary">修改</el-button>
          <a-modal
            v-model:visible="visible"
            @ok="handleOk(form, scope.row.id)"
            @cancel="handleCancel"
          >
            <template #title>修改用户</template>
            <div>
              <a-row :gutter="16">
                <a-col :span="8">
                  <a-form-item field="账号" label="账号" label-col-flex="80px">
                    <a-input
                      v-model="form.account"
                      placeholder="please enter..."
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item field="密码" label="密码" label-col-flex="80px">
                    <a-input
                      v-model="form.password"
                      placeholder="please enter..."
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="16">
                <a-col :span="16">
                  <a-form-item field="姓名" label="姓名" label-col-flex="100px">
                    <a-input
                      v-model="form.name"
                      placeholder="please enter..."
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item field="性别" label="性别" label-col-flex="80px">
                    <a-select
                      v-model="form.sex"
                      :style="{ width: '320px' }"
                      placeholder="Please select ..."
                      show-header-on-empty
                    >
                      <a-option value="1">女</a-option>
                      <a-option value="0">男</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="16">
                <a-col :span="16">
                  <a-form-item field="电话" label="电话" label-col-flex="100px">
                    <a-input
                      v-model="form.iphone"
                      placeholder="please enter..."
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item field="角色" label="角色" label-col-flex="80px">
                    <a-select
                      v-model="form.role"
                      :style="{ width: '320px' }"
                      placeholder="Please select ..."
                      show-header-on-empty
                    >
                      <a-option value="0">学生</a-option>
                      <a-option value="1">员工</a-option>
                      <a-option value="2">管理员</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </a-modal>
          <el-button @click="toDelete(scope.row.id)" type="danger"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="example-pagination-block" style="float: right">
      <el-pagination
        @prev-click="perv"
        @next-click="next"
        layout="prev, pager, next"
        :total="pages"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { User, UserControllerService, UserRegister } from "../../../generated";
import { isNumber } from "@arco-design/web-vue/es/_utils/is";

const dialogForm = ref(true);

const show = ref(true);

const pages = ref(null);
const data = ref([]);
const initSearchParams = {
  pageSize: 5,
  pageNum: 1,
};
const perv = () => {
  if (initSearchParams.pageNum > 1) {
    initSearchParams.pageNum -= 1;
  }
};
const next = () => {
  if (pages.value != null && initSearchParams.pageNum < pages.value) {
    initSearchParams.pageNum += 1;
  }
};
const loadData = (params: any) => {
  UserControllerService.listPageUsingPost2(
    initSearchParams.pageNum,
    initSearchParams.pageSize
  ).then((res: any) => {
    data.value = res.data.records;
    pages.value = res.data.pages;
  });
};
const form = reactive({
  id: undefined,
  account: "",
  iphone: undefined,
  name: "",
  password: "",
  role: undefined,
  sex: undefined,
} as User);

const searchParams = ref(initSearchParams);
loadData(initSearchParams);

const visible = ref(false);
const toEdit = () => {
  visible.value = true;
};
const toDelete = (row: any) => {
  UserControllerService.deleteUsingPost(row);
  UserControllerService.listPageUsingPost2(1, 5).then((res: any) => {
    data.value = res.data.records;
  });
};
// const handleOk = () => {
//   UserControllerService.updateUserUsingPost(form);
// };
const handleOk = (form: any, name: any) => {
  form.id = name;
  UserControllerService.updateUserUsingPost(form);
  UserControllerService.listPageUsingPost2(1, 5).then((res: any) => {
    data.value = res.data.records;
  });
};
const handleCancel = () => {
  visible.value = false;
};
const searchUser = () => {
  UserControllerService.seacherUserUsingPost(form.name)
    .then((res) => {
      data.value = res.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
const downloadExcel = () => {
  UserControllerService.downloadUsingGet();
};
const uploadFile = () => {
  UserControllerService.uploadUsingPost();
};
</script>
